<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>Zordpress</title>

    <link rel="stylesheet" href="css/pure.css">
    <link rel="stylesheet" href="css/main-grid.css">
    <link rel="stylesheet" href="css/blog.css">
</head>
<body>

<div id="layout" class="pure-g">
    <div class="sidebar pure-u-1 pure-u-med-1-4">
        <div class="header">
            <hgroup>
                <h1 class="brand-title">Zordpress</h1>
                <h2 class="brand-tagline">Lorem ipsum dolor sit</h2>
            </hgroup>
        </div>
    </div>

    <div class="content pure-u-1 pure-u-med-3-4">
        <div>
            <!-- A wrapper for all the blog posts -->
            <div class="posts">
                <h1 class="content-subhead">Pinned Post</h1>

                <!-- A single blog post -->
                <section class="post">
                    <header class="post-header">
                        <img class="post-avatar" alt="Zeno Rocha&#x27;s avatar" height="48" width="48" src="../common/zeno.jpg">

                        <h2 class="post-title">Chrome DevTools Secrets</h2>

                        <p class="post-meta">
                            By <a href="#" class="post-author">Zeno Rocha</a> under <a class="post-category post-category-design" href="#">Chrome</a> <a class="post-category post-category-pure" href="#">DevTools</a>
                        </p>
                    </header>

                    <div class="post-description">
                        <p id="my-post">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, magnam eos rem voluptatibus recusandae odio neque voluptates perferendis quod quis odit voluptatem dolore! Accusamus, hic, officia vero animi debitis incidunt ipsum culpa doloribus recusandae fugiat in excepturi suscipit laboriosam fugit!
                        </p>
                    </div>
                </section>
            </div>

            <div class="posts">
                <h1 class="content-subhead">Recent Posts</h1>

                <section class="post">
                    <header class="post-header">
                        <img class="post-avatar" alt="Todd McLeod&#x27;s avatar" height="48" width="48" src="../common/todd.jpg">

                        <h2 class="post-title">Why Fresno City College rocks</h2>

                        <p class="post-meta">
                            By <a class="post-author" href="#">Todd McLeod</a> under <a class="post-category post-category-opinion" href="#">Opinion</a>
                        </p>
                    </header>

                    <div class="post-description">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </p>
                    </div>
                </section>

                <section class="post">
                    <header class="post-header">
                        <img class="post-avatar" alt="Andrew Rota&#x27;s avatar" height="48" width="48" src="../common/andrew.jpg">

                        <h2 class="post-title">Getting started with Web Components</h2>

                        <p class="post-meta">
                            By <a class="post-author" href="#">Andrew Rota</a> under <a class="post-category post-category-web" href="#">Web</a>
                        </p>
                    </header>

                    <div class="post-description">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptatibus aperiam voluptatum nulla exercitationem, a porro totam magnam at esse illum, vel ea magni ex laudantium perspiciatis, tempora expedita molestiae repellendus. Consequuntur corporis ipsa tempore et vero, ipsam consectetur necessitatibus non architecto accusamus distinctio ducimus molestias quibusdam voluptate, tempora numquam.
                        </p>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<script src="js/save.js"></script>

</body>
</html>
